<template>
  <div>
    <van-nav-bar
      title="我的"
      left-arrow
      @click-left="
        $router.push({
          path: '/index',
          query: {
            latitude: latitude,
            longitude: longitude,
            name: name,
            val: '外卖',
          },
        })
      "
    />
    <a :href="change">
      <div class="enter">
        <div class="head_portrait">
          <img :src="baseURL + '/img/' + userinfo.avatar" alt="" />
        </div>
        <div class="login">
          <div>{{ userinfo.username ? userinfo.username : "登入/注册" }}</div>
          <div><van-icon name="graphic" /><span>暂无绑定手机号</span></div>
        </div>
        <div class="rigth">
          <van-icon name="arrow" />
        </div>
      </div>
    </a>

    <van-grid :column-num="3">
      <van-grid-item>
        <div>
          <span style="color: #ff9901; font-size: 25px; font-weight: bold">{{
            userinfo.balance
          }}</span
          >元
        </div>
        <div @click="$router.push('/mymoney')">我的余额</div>
      </van-grid-item>
      <van-grid-item>
        <div>
          <span style="color: red; font-size: 25px; font-weight: bold">{{
            userinfo.gift_amount
          }}</span
          >个
        </div>
        <div @click="$router.push('/discounts')">我的优惠</div></van-grid-item
      >
      <van-grid-item>
        <div>
          <span style="color: #0a0; font-size: 25px; font-weight: bold">{{
            userinfo.point
          }}</span
          >分
        </div>
        <div>我的积分</div>
      </van-grid-item>
    </van-grid>
    <div class="shopping">
      <ul>
        <li>
          <span class="iconfont icon-mobanliebiao"></span><span>我的订单</span>
          <van-icon name="arrow" style="color: #ccc" />
        </li>
        <li>
          <span
            class="iconfont icon-fenqishangcheng"
            style="color: #fc7b53"
          ></span
          ><span>积分商城</span>
          <van-icon name="arrow" style="color: #ccc" />
        </li>
        <li @click="$router.push('/vip')">
          <span class="iconfont icon-huangguan" style="color: #ffc636"></span
          ><span>饿了么会员卡</span>
          <van-icon name="arrow" style="color: #ccc" />
        </li>
      </ul>
    </div>
    <div class="serve">
      <ul>
        <li>
          <span
            class="iconfont icon-checkbox-full"
            style="color: #4aa5f0"
          ></span
          ><span>饿了么会员卡</span>
          <van-icon name="arrow" style="color: #ccc" />
        </li>
        <li>
          <span class="iconfont icon-eliaomo" style="color: #4aa5f0"></span
          ><span>下载饿了么App</span>
          <van-icon name="arrow" style="color: #ccc" />
        </li>
      </ul>
    </div>
    <div class="bottom">
      <Bottom :value="val"></Bottom>
    </div>
  </div>
</template>

<script>
import Bottom from "./bottom.vue";
import { user } from "../api/user";
import axios from "../utils/request";
export default {
  components: { Bottom },
  data() {
    return {
      name: JSON.parse(localStorage.getItem("name")),
      longitude: JSON.parse(localStorage.getItem("longitude")),
      latitude: JSON.parse(localStorage.getItem("latitude")),
      change: localStorage.getItem("token")
        ? "#/change_information"
        : "#/login",
      userinfo: [],
      baseURL: axios.defaults.baseURL,
      val: this.$route.query.val,
    };
  },
  created() {
    user(JSON.parse(localStorage.getItem("token"))).then((res) => {
      this.userinfo = res.data;
      console.log(this.userinfo);
    });
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar__content {
  background-color: #3190e8;
  .van-nav-bar__arrow {
    color: #fff;
  }
  .van-nav-bar__title {
    color: #fff;
  }
}
.enter {
  width: 100%;
  height: 100px;
  background-color: #3190e8;
  overflow: hidden;
}
.head_portrait {
  width: 70px;
  height: 70px;
  margin-left: 10px;
  margin-top: 15px;
  border-radius: 50px;
  overflow: hidden;
  float: left;
  img {
    width: 100%;
  }
}
.login {
  margin-left: 10px;
  color: #fff;
  float: left;
}
.login div:first-child {
  font-size: 20px;
  font-weight: bold;
  margin-top: 25px;
  margin-bottom: 10px;
}
.rigth {
  color: #fff;
  float: right;
  line-height: 100px;
  margin-right: 10px;
}
/deep/.van-grid-item div:first-child {
  margin-bottom: 10px;
}
/deep/.van-grid-item {
  margin-bottom: 10px;
}
.shopping {
  margin-bottom: 10px;
}
.shopping li {
  width: 100%;
  height: 50px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  line-height: 50px;
  :first-child {
    margin: 0 10px;
    font-size: 20px;
  }
  /deep/.van-icon {
    float: right;
    margin-right: 5px;
    line-height: 50px;
    color: #ccc;
  }
}
.serve li {
  width: 100%;
  height: 50px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  line-height: 50px;
  :first-child {
    margin: 0 10px;
  }
  /deep/.van-icon {
    float: right;
    line-height: 50px;
    margin-right: 5px;
    color: #ccc;
  }
}
.bottom {
  width: 100%;
  position: fixed;
  bottom: 0px;
}
</style>